<template>
   <div class="wrapper">
        <div class="top-wrap">
            <p class="state">待发货</p>
            <p>买家已付款，等待卖家发货</p>
        </div>
        <div class="content-wrap">
            <div class="age_wrap user-age-address">
                <div class="pos">
                    <img src="/static/imgs_s04/03/s04_pic02.png" alt="">
                </div>
                <div class="user-address-name">
                    <div class="username">
                        <div class="user_age_tel">
                            <span class="client_name">小明</span>
                            <span class="client_tel">15517187268</span>
                        </div>
                        <span>修改&gt;</span>
                    </div>
                    <p class="add_ar">河南省郑州市金水区中州大道农业路苏荷中心</p>
                </div>
            </div>
            <div class="age_wrap goods-age-text">
                <div class="topbar">
                    <div class="logo-wrap">
                        <em class="logo-box"></em>
                        <h2>汇方圆</h2>
                    </div>
                </div>
                <div class="goods-age-box">
                    <div class="good-pic">
                        <img src="/static/imgs_s04/03/s04_rio.png" alt="">
                    </div>
                    <div class="text-age">
                        <p>RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</p>
                        <p class="age-box-size">
                            <span>275ml*6瓶</span>
                            <span>x1</span>
                        </p>
                        <p class="pay_m">￥72.90</p>
                    </div>
                </div>
            </div>
            <div class="age_wrap order-age-money">
                <p>
                    <span>商品总额</span>
                    <span class="money-r">￥72.90</span>
                </p>
                <p>
                    <span>运费</span>
                    <span class="money-r">￥0</span>
                </p>
                <p class="need-money">
                    <span>需付款：</span>
                    <span class="money-r">￥72.90</span>
                </p>
            </div>
            <div class="age_wrap order-time-payment">
                <p class="order-ages">订单信息</p>
                <p>
                    <span class="ord-num">订单编号:</span>
                    <span>568979875668766</span>
                </p>
                <p>
                    <span class="ore-time">下单时间:</span>
                    <span>2018-06-08 18:22:06</span>
                </p>
                <p>
                    <span class="pay-ment">支付方式:</span>
                    <span>微信支付</span>
                </p>
            </div>
        </div>
        <div class="footer-wrap">
                <div class="star-area">
                    <span>
                        <img src="/static/imgs_s04/03/s04_collectz.png" alt="">
                    </span>
                    <span>已收藏</span>
                </div>
                <div class="btn-age-wrap">
                    <button>查看物流</button>
                </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
     
      }
    
  },

  components: {
  },

  methods: {
  
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #eee;
}
body,html{
    font-size: 13px;
}
em,i{
    font-style: normal;
    display: inline-block;
}

/* 顶部区域 */
.top-wrap{
    width: 100%;
    height: 170px;
    padding-top: 36px;
    box-sizing: border-box;
    background-color: #32B16C;
}
.top-wrap p{
    color: #fff;
    margin-bottom: 15px;
    margin-left: 18px;
}
.top-wrap .state{
    font-size: 20px;
}
/* 主体内容区域 */
.content-wrap{
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: -34px;
    padding-bottom: 70px;
}
.content-wrap .age_wrap{
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 9px;
    margin-bottom: 10px;
}
.user-age-address{
    display: flex;
    flex-direction: row;
    height: 68px;
    justify-content: space-between;
}
.user-age-address .pos{
    width: 30px;
    height: 30px;
    padding: 19px 10px 19px 13px;
}
.user-age-address .pos img{
    width: 30px;
    height: 30px;
}
.user-address-name{
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    flex: 1;
}
.user-address-name .username{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:10px 0px;
    padding-right: 15px;
}
.client_name{
    color: #000;
    /* font-weight: 600; */
    font-size: 13px;
}
.client_tel{
    color: #A3A5A8;
    font-size: 12px;
}
.user_age_tel{
    flex: 1
}
.user_age_tel+span{
    font-size: 12px;
    color: #666666;
}
.username+p{
    font-size: 12px;
    color: #333333;
}
.goods-age-text{
    height: 145px;
    display: flex;
    flex-direction: column;
    font-size: 11px;
}
.topbar .logo-wrap{
    height: 18px;
    margin-top: 10px;
    margin-left: 9px;
    display: flex;
}
.logo-wrap .logo-box{
    width: 18px;
    height: 18px;
    background-color: #eee;
    display: inline-block;
}
.logo-wrap h2{
    margin-left: 6px;  
    color: #303030;
    font-size: 12px;
}
.goods-age-box{
    display: flex;
    flex-direction: row;
    margin-top: 17px; 
}
.good-pic{
    padding-right: 9px;
}
.good-pic,.good-pic img{
    width: 91px;
    height: 91px;
}
.goods-age-box .text-age p{
    margin-bottom: 15px;
}
.text-age{
    flex: 1;
    padding-right: 10px;
}
.age-box-size{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.pay_m{
    text-align: right;
    color: #333333;
    font-size: 13px;
}
.order-age-money{
    height: 121px;
}
.order-age-money p{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #666666;
    padding: 0 10px;
}
.money-r{
    float: right;
}
.need-money span{
    /* font-weight: 600; */
    font-size: 13px;
    color: #000;
}
.need-money span.money-r{
    color: #F75458;
    font-size: 15px;
}
.content-wrap .order-time-payment{
    height: 123px;
    display: flex;
    flex-direction: column;

}
.order-time-payment p {
    font-size: 11px;
    color: #1D1E1E;
    height: 20px;
    padding: 0 10px;
    margin:5px 0;
    font-family: "SourceHanSansCN-Normal";
}
.order-ages{
    font-size: 12px;
    color: #333333;
    font-weight: 600;
    padding: 10px 10px;
}
.footer-wrap{
    width: 100%;
    height: 47px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
}
.star-area{
    display: flex;
    width: 30px;
    flex-direction: column;
    padding:8px 9px 0px 10px;
    text-align: center;
    font-size: 9px;
}
.star-area img{
    width: 18px;
    height: 18px;
}
.btn-age-wrap{
    padding: 11px 10px 9px 0px;
}
.btn-age-wrap button{
    width: 69px;
    height: 27px;
    background-color: #32B16C;
    color: #fff;
    font-size: 12px;
    border-radius: 14px;
}

</style>
